<template>
    <div class="header">
        <div class="logo">
            <router-link to="/pages/home"><h3>豆瓣</h3></router-link>
        </div>
        <div class="tab">
            <ul>
                <router-link to="/pages/movie"><li style="color: #2384E8">电影</li></router-link>
                <router-link to="/pages/book"><li style="color: #9F7860">图书</li></router-link>
                <router-link to="/pages/comment"><li style="color: #E4A813">广播</li></router-link>
                <router-link to="/pages/video"><li style="color: #2AB8CC">视频</li></router-link>
                <router-link to="/pages/search"><li class="talion">搜索</li></router-link>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Header"
    }
</script>

<style scoped>
    .header{
        max-width: 540px;
        width: 100%;
        height: 60px;
        border-bottom: 1px solid #eee;
        padding-right: 15px;
        z-index: 9999;
        position: fixed;
        top:0;
        background-color: #fff;
    }
    .header .logo{
        width: 100px;
        line-height: 60px;
        float: left;
        background: url("../images/douban_logo.png") no-repeat center;
        background-size: 50%;
        height: 60px;

    }
    .logo h3{
        text-indent: -1000px;
        overflow: hidden;
    }
    .tab ul{
        float: right;
    }
    .tab li{
        float: left;
        line-height: 60px;
        margin:0 5px;
        width:35px;
        text-align: center;
    }
    .talion{
        background: url() no-repeat center 23px;
        background-size: 70%;
        text-indent: -99999px;
        overflow: hidden;
        margin-top:10px;
    }
</style>